<template>
  <!-- <tabbar class="tabbar">
      <tabbar-item
        :selected="item.path===router"
        v-for="(item,index) in tabArr"
        :key="index"
        @on-item-click="tiaozhuan(item.path,index)"
      >
        <img
          slot="icon"
          :src='item.show===true||item.path===router?item.icon1:item.icon'
        >
        <span slot="label">{{item.text}}</span>
      </tabbar-item>
    </tabbar> -->
  <div class="tabbar">
    <div
      v-for="(item,index) in tabArr"
      :key="index"
      @click="tiaozhuan(item.path,index)"
    >
      <div v-if="item.logo" class="logo-box">
          <!-- <div>{{audiostate? '播放' : '暂停'}}</div> -->
          <img  :src="item.logo" class="logo" :style="`transform: rotateZ(${num}deg);`">
      </div>
      <img v-if="item.icon" :src='item.show===true||item.path===router?item.icon1:item.icon'>
      <section v-if="item.text" :class="item.show===true||item.path===router ? 'active': ''">{{item.text}}</section>
    </div>
  </div>
</template>

<script>
import {
  getLastVideo
} from '@/api/home'
import { mapState } from 'vuex'
import { Tabbar, TabbarItem } from 'vux'
import { clearInterval } from 'timers'
export default {
  name: 'tab',
  components: {
    Tabbar,
    TabbarItem
  },
  computed: {
    ...mapState({
      select: state => state.audio.select,
      num: state => state.num,
      homeaudio: state => state.homeaudio,
      audioplayer: state => state.audioplayer,
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      open_id: state => state.open_id
    })
  },
  data () {
    return {
      audiostate: false,
      router: this.$route.name,
      tabArr: [
        {
          text: '首页',
          path: 'home',
          icon: 'https://o6wndwjxn.qnssl.com/%E9%A6%96%E9%A1%B5@2x.png',
          icon1: 'https://o6wndwjxn.qnssl.com/%E9%A6%96%E9%A1%B5@2x123.png',
          show: false
        },
        {
          text: '分类精选',
          path: 'information',
          icon: 'https://o6wndwjxn.qnssl.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB@2x.png',
          icon1: 'https://o6wndwjxn.qnssl.com/%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB@2x123.png',
          show: false
        },
        {
          logo: 'https://o6wndwjxn.qnssl.com/logo.png',
          show: false
        },
        {
          text: '我的课程',
          path: 'mycourse',
          icon: 'https://o6wndwjxn.qnssl.com/%E6%88%91%E7%9A%84%E8%AF%BE%E7%A8%8B@2x.png',
          icon1: 'https://o6wndwjxn.qnssl.com/%E6%88%91%E7%9A%84%E8%AF%BE%E7%A8%8B@2x123.png',
          show: false
        },
        {
          text: '个人中心',
          path: 'center',
          icon: 'https://o6wndwjxn.qnssl.com/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83@2x.png',
          icon1: 'https://o6wndwjxn.qnssl.com/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83@2x123.png',
          show: false
        }
      ]
    }
  },
  created () {
    // if (this.$store.state.audio.homeaudio === '') {
    this.getaudio()
    // }
  },
  mounted () {
    document.querySelector('.logo').style.transform = `rotateZ(${this.$store.state.audio.num}deg)`
  },
  methods: {
    getaudio () {
      let obj = {
        member_id: this.user_id
      }
      getLastVideo(obj).then(res => {
        if (res.data.code === 200) {
          this.audio = res.data.data
          res.data.data.chapter_id = res.data.data.study_chater
          console.log(res.data.data)
          this.$store.commit('setselect', res.data.data)
          this.$store.commit('homeaudio', res.data.data.content)
        }
      })
    },
    tiaozhuan (path, index) {
      // this.audiostate = !this.$store.state.audioplayer.audio.paused
      if (path) {
        for (let i = 0; i < this.tabArr.length; i++) {
          if (i === index) {
            this.tabArr[i].show = true
          } else {
            this.tabArr[i].show = false
          }
        };
        this.$router.push({
          name: path
        })
      } else {
        console.log(this.setselect)
        var str = this.$store.state.audio.homeaudio ? this.$store.state.audio.homeaudio : this.select.content
        if (str.indexOf('mp4') !== -1) {
          if (this.$store.state.audio.audioplayer.paused === false) {
            this.$store.state.audio.audioplayer.pause()
          }
          this.$router.push({
            path: '/co_video',
            query: {
              curriculum_id: this.select.curriculum_id,
              chapter_id: this.select.chapter_id
            }
          })
        } else {
          this.$router.push({
            path: '/co_audio',
            query: {
              curriculum_id: this.select.curriculum_id,
              chapter_id: this.select.chapter_id
            }
          })
        }
      }
    }
  },
  watch: {
    $route (to, from) {
      this.router = this.$route.name
    }
  }
}
</script>
<style>
.weui-tabbar__label {
  line-height: 2 !important;
}
</style>

<style  lang="less" scoped>
.weui-tabbar {
  background: white !important;
}
.weui-tabbar__icon img {
  width: 20px !important;
  height: 20px !important;
  margin-top: 4px;
}

.tab {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #abcdef;
  height: 44px;
}
.tabbar {
  border-top: solid 1px #e5e5e5;
  background-color: #fff;
  z-index: 100;
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  div{
    flex: 1;
    text-align: center;
    .logo-box{
      width: 45px;
      height: 45px;
      margin: 0 auto;
      border-radius: 50%;
      overflow: hidden;
      background-image: url("https://o6wndwjxn.qnssl.com/123123333%E5%8F%91%E5%8F%91%E5%8F%91.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .logo{
       width: 100%;
       padding: 0;
       position: relative;
       z-index: -1;
    }
    img {
      width: 20px;
      margin-bottom: 7px;
    }
    section {
      font-family: PingFangSC-Regular;
      font-size: 10px;
      text-align: center;
      color: #999999;
    }
    .active{
      color: #da4131;
    }
  }
}
</style>
